import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {
  Button,
  Dialog,
  Text,
  TextField,
  TouchableOpacity,
  View,
} from 'react-native-ui-lib';
import {commonStyles} from '../../../configs/commonStyle';
import {Icon} from '../../components';
import {isAndroid} from '../../../configs/platform';
import {submitUnusual} from '../../../net/transfer';
import ToastUtils from '../../../utils/ToastUtils';
import {inject} from 'mobx-react';

/**
 * 添加备注
 */
@inject('userStore')
export default class AbnormalDialog extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cake: {},
      isOpen: false,
      remark: '',
    };
  }

  show = ({cake}) => {
    this.setState({isOpen: true, cake});
  };

  // 提交异常
  handleAbnormalSubmit = remark => {
    const {cake} = this.state;
    const { location } = this.props.userStore;
    this.dismiss();
    submitUnusual({
      orderId: cake.orderId,
      orderDetailId: cake.orderDetailId,
      abnormalContent: remark,
      longitude: location.longitude,
      latitude: location.latitude,
    })
      .then(res => {
        ToastUtils.showSuccessInfo('提交成功');
      })
      .catch(err => {
        ToastUtils.showFailInfo(err?.msg || '失败，请重试');
      });
  };

  dismiss = () => {
    this.setState({isOpen: false});
  };

  renderPannableHeader = props => {
    const {cake} = this.state;
    return (
      <View>
        <View margin-10 row centerV spread>
          <View flex centerV>
            <Text style={{...commonStyles.text_black_17}}>{`${
              cake?.goodsName || ''
            }（${cake?.xmbzNo}）`}</Text>
          </View>
          <TouchableOpacity onPress={this.dismiss}>
            <Icon type="AntDesign" name={'close'} size={16} color={'#282828'} />
          </TouchableOpacity>
        </View>
        <View height={1} bg-line />
      </View>
    );
  };

  render() {
    const {isOpen, remark} = this.state;
    return (
      <Dialog
        migrate
        width={'100%'}
        height={'50%'}
        bottom
        containerStyle={styles.roundedDialog}
        visible={isOpen}
        onDismiss={this.dismiss}
        renderPannableHeader={this.renderPannableHeader}>
        <View padding-15 style={commonStyles.container}>
          <View style={styles.textInput}>
            <TextField
              multiline
              hideUnderline
              black333
              maxLength={500}
              value={remark}
              containerStyle={{flex: 1}}
              onChangeText={remark => this.setState({remark})}
              text14
              showCharacterCounter={isAndroid()}
              placeholder="输入异常信息..."
            />
          </View>
          <Button
            label={'确认提交'}
            marginT-20
            color={'#49493D'}
            onPress={() => {
              this.handleAbnormalSubmit(remark);
            }}
            style={{backgroundColor: '#FED13F'}}
            borderRadius={7}
          />
        </View>
      </Dialog>
    );
  }
}

const styles = StyleSheet.create({
  roundedDialog: {
    backgroundColor: 'white',
  },
  textInput: {
    minHeight: 150,
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
    borderRadius: 12,
    borderColor: '#eeeeee',
    backgroundColor: '#F0F0F0',
  },
});
